<template>
  <div>
    <el-dialog
      title="新建消耗"
      :visible.sync="dilogShow"
      width="420px"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="ruleForm"
          :label-position="labelPosition"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="渠道名称" prop="putinPlatform">
            <el-select
              v-model="ruleForm.putinPlatform"
              clearable
              placeholder="请选择渠道"
              style="width: 372px;"
              @change="nameChange"
            >
              <el-option
                :value="item"
                v-for="(item, index) in companyList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="消耗金额"
            prop="putinMoney"
            style="width: 372px;"
          >
            <el-input
              v-model.number="ruleForm.putinMoney"
              placeholder="请输入消耗金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="消耗日期" required>
            <el-form-item prop="putinFormDate" style="width: 372px;">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.putinFormDate"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="消耗所属部门" prop="deptId" required>
            <DepSelect
              style="width: 98%;"
              @change="selectChange"
              :value="ruleForm.deptId"
            ></DepSelect>
          </el-form-item>
          <div class="mb-10 color-red">消耗部门请选择二级或以上的部门</div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCancel()">取 消</el-button>
        <el-button type="primary" @click="submitClick">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import manageDep from "@/views/admin/components/manageDep"; // 部门选择器
import { querySourceAPI, addAPI, updateAPI } from "@/api/roi";
import DepSelect from "../../components/DepSelect"; //部门选择器-单选

// import { mapGetters } from "vuex";
export default {
  components: {
    manageDep,
    DepSelect
  },
  data() {
    return {
      ruleForm: {
        putinMoney: "",
        deptId: "",
        putinFormDate: "",
        putinPlatform: ""
      },
      labelPosition: "top",
      rules: {
        putinPlatform: [
          { required: true, message: "请选渠道", trigger: "change" }
        ],
        putinMoney: [
          { required: true, message: "金额不能为空" },
          { type: "number", message: "金额必须为数字值" },
          {
            pattern: /^[1-9]*[1-9][0-9]*$/,
            message: "金额必须大于0",
            trigger: "blur"
          }
        ],
        putinFormDate: [
          { required: true, message: "请选择日期", trigger: "change" }
        ],
        deptId: [
          { required: true, message: "请选择一个部门", trigger: "change" }
        ]
      },
      companyList: []
    };
  },
  /**
   *
   * 不要改manageDeptId
   *
   */
  props: {
    dilogShow: {
      type: Boolean,
      default: false
    },
    currentRow1: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {},
  computed: {},
  mounted() {
    this.getSource();
    const obj = this.currentRow1;
    if (Object.keys(obj).length !== 0) {
      this.ruleForm.putinMoney = this.currentRow1.putinMoney;
      this.ruleForm.deptId = this.currentRow1.deptId;
      this.ruleForm.putinPlatform = this.currentRow1.putinPlatform;
      this.ruleForm.putinFormDate = this.currentRow1.putinFormDate;
    }
  },
  methods: {
    selectChange(data) {
      console.log(data);
      this.$set(this.ruleForm, "deptId", data.deptId);
    },
    closeCancel() {
      this.$emit("transferVal", false);
    },
    submitClick() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const obj = this.currentRow1;
          if (Object.keys(obj).length !== 0) {
            const updateParams = {
              putinPlatform: this.ruleForm.putinPlatform,
              putinFormDate: this.ruleForm.putinFormDate,
              putinMoney: this.ruleForm.putinMoney,
              deptId: this.ruleForm.deptId,
              putinId: this.currentRow1.putinId
            };
            updateAPI(updateParams)
              .then(res => {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.$emit("transferVal", false);
                this.$emit("update", updateParams); // 更新
              })
              .catch(() => {});
          } else {
            const params = {
              putinPlatform: this.ruleForm.putinPlatform,
              putinFormDate: this.ruleForm.putinFormDate,
              putinMoney: this.ruleForm.putinMoney,
              deptId: this.ruleForm.deptId
            };
            addAPI(params)
              .then(res => {
                if (res.msg == "操作成功") {
                  this.$message({
                    message: res.msg,
                    type: "success"
                  });
                  this.$emit("transferVal", false);
                  this.$emit("update", params); // 更新
                }
              })
              .catch(() => {});
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("transferVal", false);
    },
    // 获取渠道列表
    getSource() {
      querySourceAPI()
        .then(res => {
          this.companyList = res.data;
        })
        .catch(() => {});
    },
    // 渠道名称
    nameChange(val) {
      this.ruleForm.putinPlatform = val;
    },
    manageDepSave(e, name) {
      this[name].deptId = e.split(",")[0] === "" ? [] : e; //.split(",");
    }
  }
};
</script>
<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 0 20px;
}
.el-form-item {
  margin-bottom: 5px;
}
/deep/ .el-form-item__label {
  padding: 0 !important;
}
</style>
